<template>
	<view class="index-content">
		<view class="icon-back" @click="back" >
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>
		<view class="img-box">
			<image :src="newImgUrl+'/banner/owner-banner.png'" class="icon-banner"></image>
			<view class="notice">
				<swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :vertical="true" :interval="3000" :duration="1000" :disable-touch="true">
					<swiper-item v-for="(item,index) in info.upgrade_list" :key="index">
						<view class="one-omit">{{item}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="flex-box classify-box">
			<view :class="[classTab==1?'active-1':'','box-1 classify-item  flex-box']" @tap="exchangeTab(1)">
				<image :src="newImgUrl+'/ico/icon-down.png'" class="icon-down"></image>
				<view class="item-title">免税店主</view>
			</view>
			<view :class="[classTab==2?'active-2':'','box-1 classify-item  flex-box']" @tap="exchangeTab(2)">
				<image :src="newImgUrl+'/ico/icon-down.png'" class="icon-down"></image>
				<view class="item-title">服务商</view>
			</view>
		</view>
		<view class="template-box owner" v-if="classTab==1">
			<view class="aging">
				<image :src="newImgUrl+'/banner/owner-1.png'" class="aging-bg"></image>
				<view class="aging-title flex-box">
					<block v-if="info.shopkeeper==0 && info.service_provider==0">
						<view class="box-1" >
							开通享特权，自用省钱，分享赚钱
						</view>
						<text class="aging-text">暂未激活</text>
					</block>
					<view class="box-1" v-else-if="info.shopkeeper==1 && info.service_provider==0">
						店主特权时效期：{{info.shopkeeper_expire_day || '0天'}}
					</view>
					<view class="box-1" v-else-if="info.service_provider==1">
						您已拥有店主资格，无需重复购买!
					</view>
				</view>
			</view>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">超多权益 · 祝您大卖</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/owner-2.png'" class="image-model" mode="widthFix"></image>
			<view class="msg-tips">
				全流程全域运营获客成交指导
			</view>
			<view class="flex-box region-title wow animate__backInLeft">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">200+国际品牌接入</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/owner-3.png'" class="image-model wow bounceInUp" mode="widthFix"></image>
			<view class="flex-box region-title wow bounceInUp">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">平台帮你运营客户</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/owner-4.png'" class="image-model" mode="widthFix"></image>
			
				<view class="flex-box region-title">
					<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
					<text class="region-text">他们都拿到了结果</text>
					<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
				</view>
			<view class="white-bg " v-if="caseUserList.length>0">
				<view class="data-title flex-box">
					<view class="box-1">
						数据截止为近15天
					</view>
					<u-icon name="reload" color="#666666" size="20"  @tap="getCaseUser()"></u-icon>
					<text  @tap="getCaseUser()">换一批</text>
				</view>
				<view class="data-item flex-box" v-for="(item,index) in caseUserList" :key="index">
					<image :src="item.headimg" class="icon-item"></image>
					<view class="box-1">
						<text class="text-bg">{{item.equity_flag}}</text>
						<view class="one-omit item-name">
							{{item.nickname}}
						</view>
						<view class="">
							开店时间：{{item.open_time_day}}天
						</view>
					</view>
					<view class="">
						<text class="text-bg price">已赚：{{item.points_record_sum || 0}}元</text>
						<view class="text-center">
							累计销量：{{item.points_record_count || 0}}单
						</view>
					</view>
				</view>
			</view>
			<view class="white-bg join-us-now">
				现在加入，您将成为伊姿漾第 <text class="font-we">{{info.shopkeeper_rank_num ||0}}</text>名店主
			</view>
			<image :src="newImgUrl+'/ico/joinUs-logo.png'" class="page-footer-bg"></image>
		</view>
		<view class="template-box providers" v-if="classTab==2">
			<view class="aging">
				<image :src="newImgUrl+'/banner/providers-1.png'" class="aging-bg"></image>
				<view class="aging-title flex-box">
					<block v-if="info.service_provider==0">
						<view class="box-1" >
							开通享特权，自用省钱，分享赚钱
						</view>
						<text class="aging-text">暂未激活</text>
					</block>
					<view class="box-1" v-if="info.service_provider==1">
						服务商特权时效期：永久
					</view>
				</view>
			</view>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">超多权益 · 终身收益</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/providers-2.png'" class="image-model" mode="widthFix"></image>
			<view class="msg-tips">
				公司一对一帮扶服务商成长
			</view>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">自媒体获客培训</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/providers-3.png'" class="image-model" mode="widthFix"></image>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">全方位招商培训</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/providers-4.png'" class="image-model" mode="widthFix"></image>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">高额招商奖励</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/providers-5.png'" class="image-model" mode="widthFix"></image>
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">创业IP孵化</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<image :src="newImgUrl+'/banner/providers-6.png'" class="image-model" mode="widthFix"></image>
			
			<view class="flex-box region-title">
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line"></image>
				<text class="region-text">他们都拿到了结果</text>
				<image :src="newImgUrl+'/ico/icon-line.png'" class="icon-line transform-180"></image>
			</view>
			<view class="white-bg " v-if="caseUserList.length>0">
				<view class="data-title flex-box">
					<view class="box-1">
						数据截止为近15天
					</view>
					<u-icon name="reload" color="#666666" size="20" @tap="getCaseUser()"></u-icon>
					<text  @tap="getCaseUser()">换一批</text>
				</view>
				<view class="data-item flex-box" v-for="(item,index) in caseUserList" :key="index">
					<image :src="item.headimg" class="icon-item"></image>
					<view class="box-1">
						<text class="text-bg">{{item.equity_flag}}</text>
						<view class="one-omit item-name">
							{{item.nickname}}
						</view>
						<view class="">
							开店时间：{{item.open_time_day}}天
						</view>
					</view>
					<view class="">
						<text class="text-bg price">已赚：{{item.points_record_sum || 0}}元</text>
						<view class="text-center">
							累计销量：{{item.points_record_count || 0}}单
						</view>
					</view>
				</view>
			</view>
			<view class="white-bg join-us-now">
				现在加入，您将成为伊姿漾第 <text class="font-we">{{info.servicepro_rank_num || 0}}</text>名服务商
			</view>
			<image :src="newImgUrl+'/ico/joinUs-logo.png'" class="page-footer-bg"></image>
		</view>
		<view class="footer-btn">
			<view class="flex-box agreement">
				<u-checkbox-group>
					<u-checkbox shape="circle" v-model="isAgree"  labelSize="24rpx" activeColor="#76D1FF" inactiveColor="#76D1FF" label="我已阅读并同意" @change="agreeFun"></u-checkbox>
				</u-checkbox-group>
				
<!--				<text class="sign" v-if="classTab==1" @tap="jumpUrl(config().domain+'/index/custom_service')">《伊姿漾店主协议》</text>-->
				<text class="sign"   @tap="jumpUrl(config().domain+'/index/user_service_agreement')">《伊姿漾用户服务协议》</text>
				<text class="sign"  @tap="jumpUrl(config().domain+'/index/platform_protocol')">《平台服务协议》</text>
			</view>
			<view class="flex-box update-btn" v-if="classTab==1">
				<view class="box-1">
					原价：<text class="line-price">￥<text class="price">{{info.shopkeeper_org_price || 0}}</text></text>
				</view>
				<view class="box-1 ">
					限时价：<text class="now-price">￥<text class="price">{{info.shopkeeper_price || 0}}</text></text>
				</view>
				<view :class="[info.shopkeeper==1?'grey':'','btn over-btn']" @tap="upGradeFun(upId.shopkeeper,'shopkeeper')">
					成为店主
				</view>
			</view>
			<view class="flex-box update-btn" v-if="classTab==2">
				<view class="box-1 providers-price">
					限量加入：<text class="price-box">￥<text class="price">{{info.servicepro_price || 0}}</text></text>
				</view>
				<view :class="[info.service_provider==1?'grey':'','btn providers-btn']" @tap="upGradeFun(upId.vip,'provider')">
					成为服务商
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
        domain:'',
				newImgUrl:'',
				classTab:1,// 1店主 / 2服务商
				isAgree:false,//是否同意
				info:{
					shopkeeper: 0,//是否是店主0-1
					shopkeeper_expire_day: "",//店主时效剩余天数：365天
					shopkeeper_org_price: 0,//店主原价
					shopkeeper_price: 0,//限时价
					shopkeeper_rank_num: 0,//第几名店主
					service_provider: 0,//是否服务商0-1
					servicepro_price: 0,//服务商价格
					servicepro_rank_num: 0,//第几名名服务商
					upgrade_list: []
				},
				upId:{
					vip:0,//服务商
					shopkeeper:0//店主
				},//升级id
				caseUserList:[],//升级案例
			}
		},
		onLoad(option){
			this.newImgUrl = this.$c.newImgUrl
			this.domain = this.$c.domain
			if(option.classTab){
				this.classTab = option.classTab
			}
			this.intData()
		},
		onPageScroll(res){
			console.log(res.scrollTop);
		},
		methods:{
			//数据初始化
			intData(){//获取基本信息
				this.$u.api.equityInfo()
				.then(res=>{
					if(res.status){
						this.info = res.msg
					}
				})
				.catch(err=>{
					this.$u.toast(err)
				})
				this.getUpInfo()
				this.getCaseUser()
			},
      config(){
        return this.$c;
      },
			//获取升级id
			getUpInfo(){
				this.$u.api.equityUpInfo()
				.then(res=>{
					if(res.status){
						this.upId = res.msg
					}
				})
				.catch(err=>{
					this.$u.toast(err)
				})
			},
			//获取升级案例
			getCaseUser(){
				uni.showLoading({
					title:"加载中……"
				})
				this.$u.api.equityCaseUser({
					utype:this.classTab==1?'shopkeeper':(this.classTab==2?'vip':'')
				})
				.then(res=>{
					if(res.status){
						this.caseUserList = res.msg
						uni.hideLoading()
					}
				})
				.catch(err=>{
					// console.log(err);
					uni.hideLoading()
					this.$u.toast('网络错误，请稍后再试')
				})
			},
			back(){
				uni.navigateBack()
			},
			exchangeTab(val){
				this.classTab = val
				//获取升级案例
				this.getCaseUser()
			},
			//升级成为店主 或升级服务商
			upGradeFun(id,text){
				if(text=='shopkeeper' && (this.info.shopkeeper==1 || this.info.service_provider==1)){
					this.$u.toast('您已拥有店主资格，无需重复购买！')
					return
				}
				if(text=='provider' && this.info.service_provider==1){
					this.$u.toast('您已拥有服务商资格，无需重复购买！')
					return
				}
				if(!this.isAgree){
					this.$u.toast('请先阅读并同意协议！')
					return
				}
				if(id==0){
					this.$u.toast('网络错误，请稍后再试！')
					//重新获取id
					this.getUpInfo()
					return
				}
				uni.navigateTo({
					url:`/pages/ConfirmOrder/ConfirmOrder?id=${id}`
				})
			},
			//同意协议
			agreeFun(){
				this.isAgree = !this.isAgree
			},
			 jumpUrl(url){
			 	uni.navigateTo({
			 		url: "/pages/web-view/web-view?url=" + JSON.stringify(url)
			 	})
			 }
		}
	}
</script>
<style lang="scss">
	page{
		background:#F4F4F4;
		font-size:32rpx;
		color:#666666;
		.icon-back{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 100rpx;
			left:20rpx;
			z-index: 2;
			text-align: center;
			line-height: 75rpx;
			padding-right: 5rpx;
			// margin-top:20rpx;
			border-radius: 50%;
			background: rgba(0,0,0,0.5);
			padding-top:15rpx;
			padding-left:10rpx;
		}
	}
	.index-content{
		padding-bottom:200rpx;
		.img-box{
			position: relative;
			z-index:0;
			.notice{
				position: absolute;
				bottom:56rpx;
				width:510rpx ;
				height:60rpx ;
				line-height: 60rpx;
				text-align: center;left:50%;
				margin-left:-255rpx;
				border:1px solid #E1CBB3;
				color:#fff;
				font-size:28rpx;
				border-radius: 50rpx;
			}
			.swiper{
				width:510rpx ;
				height:60rpx ;
			}
		}
		.icon-banner{
			width: 750rpx;
			height: 610rpx;
			display: block;
		}
		.region-title{
			font-size:34rpx;
			font-weight: bold;
			color:#666;
			margin:30rpx 0;
			justify-content: center;
			.region-text{
				display: inline-block;
				min-width: 250rpx;
				text-align: center;
			}
			.icon-line{
				width: 81rpx;
				height: 16rpx;
				display: block;
				margin:0 20rpx;
			}
			.transform-180{
				transform: rotateY(180deg);
			}
		}
		.template-box{
			padding:0 20rpx;
		}
		.image-model{
			width:710rpx;
			height:auto;
		}
		.msg-tips{
			width: 510rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			margin: 20rpx auto 0;
			font-size:24rpx;
			border-radius: 20rpx;
		}
		.white-bg{
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.data-title{
				padding:20rpx;
				color:#666666;
				font-size: 26rpx;
			}
		}
		.page-footer-bg{
			display: block;
			width:216rpx;
			height:102rpx ;
			margin:60rpx auto;
		}
	}
	.aging{
		border-radius:20rpx ;
		
		font-size:28rpx;
		position: relative;
		z-index:0;
		width: 100%;
		.aging-bg{
			width: 710rpx;
			height:204rpx;
			display: block;
		}
		.aging-title{
			position: absolute;
			top:0;
			left:0;
			z-index:1;
			padding:15rpx 20rpx;
			width: 100%;
			.aging-text{
				color:#fff;
				padding:0 20rpx;
				border-radius: 40rpx;
			}
		}
	}
	.classify-box{
		.classify-item{
			flex-direction: column;
			align-items: flex-start;
		}
		.icon-down{
			width: 29rpx;
			height: 15rpx;
			display: block;
			margin:0 auto;
			opacity: 0;
		}
		.item-title{
			width: 100%;
			text-align: center;
			font-size:36rpx;
			padding:20rpx 0 30rpx;
		}
		.active-1{
			.icon-down{
				opacity: 1;
			}
			.item-title{
				color: #E1AD71;
				font-weight: bold;
			}
		}
		.active-2{
			.icon-down{
				opacity: 1;
			}
			.item-title{
				color: #DC86BB;
				font-weight: bold;
			}
		}
	}
	.data-item{
		border-bottom: 1px solid #CCCCCC;
		padding:20rpx;
		font-size:24rpx;
		color:#333333;
		.icon-item{
			width: 102rpx;
			height:102rpx;
			display: block;
			margin-right:20rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.text-bg{
			font-size-:22rpx;
			border-radius: 5rpx;
			padding:6rpx 15rpx;
		}
		.item-name{
			font-size:28rpx;
			padding:5rpx 0;
		}
		.price{
			font-size:26rpx;
			padding:10rpx 15rpx;
			border-radius: 10rpx;
			display: inline-block;
			margin-bottom:10rpx;
		}
		&:last-child{
			border-bottom:0;
		}
	}
	.text-center{
		text-align: center;
	}
	.join-us-now{
		padding:30rpx 20rpx;
		text-align: center;
		font-size:32rpx;
		.font-we{
			font-weight: bold;
			font-size:44rpx;
		}
	}
	.owner{
		.msg-tips{
			color:#bc8e58;
			border:1px solid #bc8e58;
		}
		.aging{
			color:#635643;
			.aging-text{
				background:rgba(8,8,8,0.5);
			}
		}
		.text-bg{
			background: #E3BF92;
		}
		.text-color{
			color:#877A66;
		}
		.text-btn{
			background: linear-gradient(-90deg, #EFC68A 0%, #FDE8D7 99%);
		}
	}
	.providers{
		.msg-tips{
			color:#E89ED0;
			border:1px solid #E89ED0;
		}
		.aging{
			color:#7A4A68;
			.aging-text{
				background:rgba(8,8,8,0.2);
			}
		}
		.text-bg{
			color:#fff;
			background: #E89ED0;
		}
		.text-color{
			color:#E89ED0;
		}
		.text-btn{
			background: linear-gradient(-90deg, #CD67A3 0%, #FCD4EA 99%);
		}
	}
	.footer-btn{
		background: #fff;
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		font-size:28rpx;
		z-index:2;
		.agreement{
			font-size:24rpx;
			padding:20rpx;
			border-bottom: 1px solid #ccc;
			.sign{
				color:#76D1FF;
			}
		}
		.update-btn{
			padding:20rpx;
			color:#999999;
			.line-price{
				text-decoration: line-through;
				font-size: 32rpx;
			}
			.now-price{
				font-size: 32rpx;
				font-weight: bold;
				color:#877A66;
			}
			.price{
				font-size:45rpx;
				font-weight: bold;
			}
			.price-box{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.btn{
			width: 222rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-weight: bold;
		}
		.providers-price{
			color:#DB87B8 ;
		}
		.over-btn{
			color:#877A66;
			background: linear-gradient(-90deg, #EFC68A 0%, #FDE8D7 99%);
		}
		.providers-btn{
			color:#fff;
			background: linear-gradient(-90deg, #CD67A3 0%, #FCD4EA 99%);
		}
		.grey{
			color: #666 !important;
			background: linear-gradient(-90deg, #999, #ddd) !important;
		}
		
	}
</style>